<template>
  <div class="layout">
    <!-- 左侧菜单 -->
    <LeftMenu class="left-menu" />

    <div class="right-content">
      <!-- 顶部 Header -->
      <Header class="header" />

      <!-- 主体内容 -->
      <div class="main">
        <router-view />
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import LeftMenu from '@/components/menu/left-menu.vue'
import Header from '../Common/header.vue';
</script>

<style scoped>
.layout {
  display: flex;
  height: 100vh;
}

.left-menu {
  width: 200px;
  height: 100vh;
  overflow: auto;
  flex-shrink: 0;
}

.right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.header {
  height: 48px;
  flex-shrink: 0;
  background-color: white;
}

.main {
  flex: 1;
  overflow: auto;
  padding: 25px;
  background-color: #f5f5f5;
}
</style>
